<template>
	<view class="user">

		<view class="index_head">

		</view>
		<u-modal :show="show" :title="title" showCancelButton="true" @confirm="confirm" @cancel="cancel">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>


				<u-form-item label="手机" prop="userInfo.mobile" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.mobile" border="none" disabled="true"></u--input>

					<u-button type="success" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						slot="right">获取手机号</u-button>



				</u-form-item>
			</u--form>

		</u-modal>
		<view class="user-head">
			<view class="user-top" v-if="!loginshow">
				<view class="user-avatar">

					<u--image src="/static/user/default-avatar.png" width="60px" height="60px">
					</u--image>
				</view>

				<text @click="login()">登录/注册</text>
			</view>

			<view class="user-top" v-if="loginshow">
				<view class="user-avatar">
					<image style="width:60px; height: 60px; border-radius: 50%; background-color: #eeeeee;"
						mode="widthFix" :src="userinfo.avatarUrl"></image>
				</view>
				<text style="margin-right: 20rpx;">{{userinfo.nickName}}</text>
				<template v-if="userinfo.isMember">
					<u-icon name="/static/user/VIP.png" width="20" height="20"></u-icon>
				</template>

			</view>

		</view>
		<view class="content">
			<view class="my_make">
				<view class="title">我的今日预约</view>
				<view class="list">
					<view v-if="showmake" class="make_list">
						<view class="make_list_item" v-for="(item,index) in myday">
							{{item.projectName}}
						</view>
					</view>
					<view v-else class="">
						您今天没有预约哦~
					</view>

				</view>
			</view>
			<view class="allmake">
				<view class="allmake_item" @click="goall">
					<view class="left">
						<u-icon name="file-text" size="40rpx"></u-icon>
						<view style="margin-left: 40rpx;">我的所有预约</view>

					</view>
					<u-icon name="arrow-right" size="40rpx"></u-icon>
				</view>
				<u-gap height="1" bgColor="#c0c4cc"></u-gap>
				<view class="allmake_item " @click="goresuse(1)">
					<view class="left">
						<u-icon name="man-add" size="40rpx"></u-icon>
						<view style="margin-left: 40rpx;">关于我们</view>

					</view>
					<u-icon name="arrow-right" size="40rpx"></u-icon>
				</view>
				<u-gap height="1" bgColor="#c0c4cc"></u-gap>
				<!-- <view class="allmake_item " @click="gomsg">
					<view class="left">
						<u-icon name="man-add" size="40rpx"></u-icon>
						<view style="margin-left: 40rpx;">消息订阅服务</view>

					</view>
					<u-icon name="arrow-right" size="40rpx"></u-icon>
				</view> -->
				<!-- <u-gap height="1" bgColor="#c0c4cc"></u-gap> -->
				<view class="allmake_item " @click="show=true">
					<view class="left">
						<u-icon name="man-add" size="40rpx"></u-icon>
						<view style="margin-left: 40rpx;">完善个人信息</view>

					</view>
					<u-icon name="arrow-right" size="40rpx"></u-icon>
				</view>
				<u-gap height="1" bgColor="#c0c4cc"></u-gap>
				<view class="allmake_item " @click="goresuse(2)">
					<view class="left">
						<u-icon name="man-add" size="40rpx"></u-icon>
						<view style="margin-left: 40rpx;">联系我们</view>

					</view>
					<u-icon name="arrow-right" size="40rpx"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getlogin,
		getUserInfo,

		getPhone,
		getmyday,
		getipi
	} from "@/api/index.js"
	export default {
		data() {
			return {
				userinfoResult: {},
				phoneResule: {},
				phone: '',
				code: '',
				openid_sess: {},
				httpuserinfo: {},
				loginshow: false,
				userinfo: {},
				make_list: [],
				showmake: true,
				tmplIds: ["2bDYbmltCFOOkTGKL-ZBngsgrWHAEndZaeg4QrTgdLQ"], //数组
				myday: [],
				show: false,
				model1: {
					userInfo: {
						name: '',
						mobile: ''

					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.mobile': {
						type: 'string',
						required: true,
						message: '请获取手机号',
						trigger: ['blur', 'change']
					},
				},

			}
		},
		onLoad(option) {
			let app = getApp();
			this.userLoginFlag = app.globalData.userLogin;
			console.log(app.globalData.userLogin);
			if (uni.getStorageSync('userinfo')) {

				that.UserInfo()

				that.loginshow = true

			}
		},
		onShow() {
			let that = this
			if (uni.getStorageSync('userinfo')) {

				that.UserInfo()

				that.loginshow = true

			}

			wx.login({
				success: function(res) {
					if (res.code) {
						that.code = res.code
					}
				}
			});
			that.getmydays()

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			goall() {
				uni.navigateTo({
					url: '/pages/user/isappliAll/isappliAll?type=' + 2
				})
			},
			goresuse(e) {

				uni.navigateTo({
					url: '/pages/user/reuse/reuse?type=' + e
				})

			},
			async getPhoneNumber(e) {
				console.log(e);
				await getPhone({
					code: this.code
				})

			},

			login() {
				let that = this
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res);
						that.userinfoResult = res;
						that.getsession();
					}
				})
			},
			getsession() { //拿code
				let that = this
				uni.login({
					success: function(info) {

						let code = info.code;

						uni.setStorageSync('code', code)
						that.getlogins(code)
						// that.getPhones(code)
					}
				});
			},
			async getlogins(code) {
				const {
					status,
					data,
					msg
				} = await getlogin({
					code: code,
					rawData: this.userinfoResult.rawData
				})

				if (status == 200) {
					console.log(data);
					uni.setStorageSync('openid', data.openid)
					uni.setStorageSync('session_key', data.session_key)
					uni.setStorageSync('token', data.token)
					this.openid_sess = data
					this.UserInfo()
				} else {

					uni.showToast({
						icon: "error",
						title: msg,
					})

				}
			},
			async UserInfo() {

				let openid = uni.getStorageSync('openid')
				const {
					data,
					status,
					msg
				} = await getUserInfo({
					openid: openid
				})

				if (status == 200) {
					console.log(data);
					this.userinfo = data
					this.loginshow = true

					uni.setStorageSync("userinfo", data)




				} else {

					uni.showToast({
						icon: "error",
						title: msg,
					})

				}
			},
			async getmydays() {

				let openid = uni.getStorageSync('openid')
				const {
					data,
					status,
					msg
				} = await getmyday({
					openid: openid,
					thatVeryDay: this.dateFormat(new Date().toISOString())
				})
				if (status == 200) {
					this.myday = data
				} else {
					uni.showToast({
						title: "请开通会员",
						duration: 2000,
						icon: "error"

					})
				}
				if (this.myday.length == 0) {
					this.showmake = false
				}
			},
			async getipis() {
				let openid = uni.getStorageSync('openid')

				const {
					data,
					status,
					msg
				} = await getipi({
					openId: openid,
					nickName: this.model1.userInfo.name,
					mobile: this.model1.userInfo.mobile
				})

				if (status == 200) {
					this.UserInfo()//更新userinfo数据
					var pages = getCurrentPages(); //获取所有页面的数组对象
					var currPage = pages[pages.length - 1]; //当前页面
					uni.reLaunch({
						url: currPage.$page.fullPath
					})
				}
			},
			async getPhoneNumber(e) {
				console.log(e);
				const {
					data,
					status,
					msg
				} = await getPhone({
					code: e.detail.code
				})
				if (status == 200) {
					this.model1.userInfo.mobile = data
				}

			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			cancel() {

				this.show = false
			},
			confirm() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					this.getipis()
					this.show = false




				}).catch(errors => {
					console.log(errors);
					uni.$u.toast('校验失败')
					return
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
	}
</style>
<style lang="scss" scoped>
	.user {
		min-height: 100vh;
		background-color: #4f4a73;
	}

	.index_head {
		height: 400rpx;
		width: 100%;
		background-image: url("https://gitee.com/zhiyuede/img-bed/raw/master/auctCar/my_index_up.jpg");
		background-size: 120% 110%;
		position: relative;
		border-radius: 0rpx 0rpx 0rpx 100rpx;
		border-bottom: 10rpx solid #e66b28;
	}


	.user-head {
		padding-top: 16rpx;
		padding-bottom: 16px;
		position: absolute;
		top: 150rpx;
	}

	.user-top {
		display: flex;
		align-items: center;
		padding: 0 $page-margin;
		padding-top: 4px;

		padding-bottom: 40px;

		text {
			margin-left: 12px;
			font-size: 22px;
			color: #fff;
			font-weight: 500;
			font-family: PingFangSC-Medium, PingFang SC;
		}
	}

	.content {
		width: 95%;
		margin: 40rpx auto;

		.my_make {
			max-height: 220rpx;
			background-color: #fff;
			border-radius: 25rpx;
			padding: 40rpx;
			box-shadow: 5rpx 5rpx 2rpx #505050;

			.title {
				font-weight: 600;

			}

			.list {
				margin-top: 20rpx;
				color: $u-light-color;

				.make_list {
					color: $u-content-color;
					display: flex;

					.make_list_item {
						padding: 20rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
						border: 1rpx solid $u-light-color;
					}
				}
			}
		}

		.allmake {
			background-color: #fff;
			margin-top: 40rpx;
			border-radius: 25rpx;
			padding: 0rpx 40rpx;
			box-shadow: 5rpx 5rpx 2rpx #505050;

			.allmake_item {
				display: flex;
				justify-content: space-between;
				align-content: center;
				height: 100rpx;

				.left {
					line-height: 100rpx;
					display: flex;
					justify-content: center;
				}
			}
		}
	}
</style>
